<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>张凯峰的个人博客</title>
    <link rel="stylesheet" type="text/css" href="../static/css/reset.css">
    <link rel="stylesheet" type="text/css" href="../static/css/blog.css">
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="jquery.transit.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $(".login").height($(window).height());
            $(".login-left").height($(window).height());
            $(".login-left").width($(window).width() - $('.login').width());
            var xLeft = $('.login').width() - $(window).width();
            $(".login-left").css('left', xLeft);
            $(".header-memu").click(function () {
                $('.login').transition({ x: '-400px' }, 1000);
                $('.login-left').transition({ x: $(window).width() - $('.login').width() }, 1000);
            });
            $(".login-left").click(function () {
                $('.login').transition({ x: '400px' }, 2000);
                $('.login-left').transition({ x: xLeft }, 2000);
            });
        });

    </script>
</head>
<body>
    <div class="header">
        <span class="header-title">KICKASS</span>
        <a href="#" class="memu-list">
            <div class="header-memu">
                    <span>MEMU</span>
            </div>
        </a>
    </div>
    <div class="section1">
        <div class="section1-chd">
            <div class="content">
                <p>ANOTHER FINE RESPONSIVE</p>
                <p>SITE TEMPLATE FREEBIE</p>
                <p>CRAFTED BY HTML5 UP.</p>
                <button>
                    active
                </button>
            </div>
        </div>
    </div>
    <div class="section2">
        <div>
            <div class="top">
                <p>ARCU ALIQUET VEL LOBORTIS ATA NISL</p>
                <p>EGET AUGUE AMET ALIQUET NISL CEP DONEC</p>
            </div>
            <div class="middle">
                <p>Aliquam ut ex ut . Donec amet imperdiet eleifend</p>
                <p>fringilla leo Aenean mi ligula, rhoncus ullamcorper.</p>
            </div>
            <div class="icon-group">
                <span class="icon">hello</span>
                <span class="icon">hello</span>
                <span class="icon">hello</span>
            </div>
        </div>
    </div>
    <div class="section3">
        <div class="img">
        </div>
    </div>
    <div class="section4">
    </div>
    <div class="login">
        <ul>
            <li>AAA</li>
            <li>BBB</li>
            <li>CCC</li>
            <li>DDD</li>
            <li>FFF</li>
            <li>GGG</li>
        </ul>
    </div>
    <div class="login-left">

    </div>
</body>
</html>